<template>
  <div id="app">
    <table border="1">
      <caption>欢迎光临_vue开发的收银系统_水果店</caption>
      <tr>
        <th>苹果10￥/斤，折扣&lt;8折&gt;</th>
      </tr>
      <tr>
        <td>输入你要购买的斤数：<input type="number" v-model="num"></td>
      </tr>
      <tr>
        <td><button @click="buy">结账买单~</button></td>
      </tr>
      <tr>
        <td>结账单：总价：{{total}}元 折扣价：{{zq}}元 省了：{{save}}元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      num: 0,
      total: 0,
      zq: 0,
      save: 0
    }
  },
  methods: {
    buy () {
      this.total = this.num * 10
      this.zq = this.total * 0.8
      this.save = this.total - this.zq
    }
  }
}
</script>

<style lang="less" scoped>
table {
  width: 500px;
  margin: 0 auto;
  td {
    text-align: center;
  }
}
</style>
